<template>
    <Center>
        <div class="p-8 flex flex-col" style="height: 100%;">
            <div class="bg-blue-500 text-white p-3 flex justify-between">
                <div class="flex items-center">
                    <el-icon>
                        <LocationInformation />
                    </el-icon>
                    {{defAddress.province + defAddress.city + defAddress.area}} - {{defAddress.address}}
                </div>
                <el-space :size="30">
                    <span @click="showAddress">修改收货地址</span>
                    <span>编辑</span>
                </el-space>
                
                <el-dialog v-model="addressShow" title="请选择地址" width="30%">                    
                    
                    
                </el-dialog>
            </div>
            <div class="grow" style="height:0;overflow-y:auto;">
                <el-row class="p-4 border-2 mt-4" v-for="(item, index) in goodList" :name="key">
                    <el-col :span="3" class="flex justify-center">
                        <el-image :src="baseUrl + item.good_info.image" style="width:100px;height:100px;" />
                    </el-col>
                    <el-col :span="19"  class="flex flex-col justify-between">
                        <div class=" text-xl">{{ item.good_info.title }}</div>
                        <div class="">
                            <span class="font-bold text-red-700 text-lg">￥{{ item.sku_info.price }}</span>
                            <span class="border-2 text-gray-300 text-sm ml-5 pr-2 pl-2">已售{{ item.good_info.sale}}件</span>
                        </div>
                    </el-col>
                    <el-col :span="2" class="flex justify-center items-center">
                        <el-radio></el-radio>
                    </el-col>
                </el-row>
                
            </div>
            <div class="bg-blue-500 text-white p-3 flex justify-between">
                <div class="flex items-center">
                    <el-radio label="全选"><span class="text-white">全选</span></el-radio>
                </div>
                <el-space>
                    <span>合计：</span>
                    <span class="text-lg">￥</span>
                    <span>{{ sumPrice }}</span>
                    <div class="pr-4 pl-4 pt-1 pb-1 rounded-full bg-white text-blue-500 pointer">结算</div>
                </el-space>
            </div>
        </div>
    </Center>
</template>
<script setup>
import test from "@/assets/imgs/1.webp";
import Center from '../../components/common/Center.vue'
import { LocationInformation } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { albumIndex,defaultAddress ,goodCartList ,addressIndex} from "@/http/api";
import { ref, computed, onMounted, watch } from "vue";
const baseUrl = import.meta.env.VITE_API_URL;
const router = useRouter();
const defAddress = ref([]);
const goodList = ref([]);
const sumPrice = ref();
const addressShow = ref(false);
const addressList = ref([]);
onMounted(() => {
    getUserDefaultAddress();
    getGoodCartList();
    getUserAddress();
});
const getUserAddress = async () => {
    const { data } = await addressIndex();
    addressList.value = data.address;    
}
const getUserDefaultAddress = async () => {
    const { data } = await defaultAddress();
    defAddress.value = data.address;    
}
const getGoodCartList = async () => {
    const { data } = await goodCartList();
    goodList.value = data.good_cart;
    sumPrice.value = data.sum_price;
    //console.log(sumPrice)
}
const showAddress = async () =>{
    addressShow.value = true
}
const onClick = function (e) {
    console.log("跳转ID：", e.id)
    router.push(`/songbook/list?id=${e.id}`)
}
</script>
<style>
  .address {
    .el-radio-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .el-radio {
        width: 100%;
        margin-bottom: 20px;
        :deep(.el-radio__label) {
          width: 100%;
        }
        .info {
          display: flex;
          flex-direction: column;
          .top {
            display: flex;
            justify-content: space-between;
            .text{
              display: flex;
              align-items: center;
              .el-tag{
                margin-left: 20px;
              }
            }
            .el-icon {
              margin-left: 20px;
              font-size: 16px;
            }
          }
        }
      }
    }
    .submit_btn{
      display: flex;
      justify-content: flex-end;
    }
  }
</style>